
<!DOCTYPE html>
<html>
    <head>
        <title>knockout.js based example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/knockout.css" media="screen" />
        <script type="text/javascript" src="js-common/jquery-1.8.3.js"></script>
        <script type='text/javascript' src='js-common/knockout-2.2.1.js'></script>
        <script type="text/javascript" src="js-v2/studenteditor.js"></script>
    </head>
    <body>
        
        <h3>Student Editor - Iteration 2</h3>
        <div class="remarks">
        This is an improved version of the <a href="http://knockoutjs.com/">knockout.js</a> based
        student editor. 
        The list contains persistent (saved) and transient (newly added) objects. The save
        action is enabled if an object is either new, or has unsaved changes. There are bulk crud actions,
        and functions to refresh client objects with values that might have been changed on the server.
        The application communicates with the <tt>nz.ac.massey.cs.webtech.rest.CRUDEndpoint</tt> servlet that 
        accepts GET/POST/PUT/DELETE requests to fetch/insert/update/delete records. The 
        <a href="http://api.jquery.com/jQuery.ajax/">jquery ajax API</a> is used for 
        this purpose. The DB used on the server is <a href="http://www.mongodb.org/">MongoDB</a>.
        </div>
        <table class="object_list">
            <thead>
                <tr><th>First Name</th><th>Name</th><th></th></tr>
            </thead>
            <!-- bind to properties of StudentListViewModel -->
            <tbody data-bind="foreach: students, visible: students().length > 0">
                <tr>
                    <td><input data-bind="value: firstName" /></td>
                    <td><input data-bind="value: name" /></td>
                    <td>
                        <button data-bind="click: $parent.remove">Delete</button>
                        <button data-bind="click: $parent.save, enable: isNew() || isDirty()">Save</button>
                        <button data-bind="click: $parent.refresh">Refresh</button>
                    </td>
                </tr> 
            </tbody>
            <tbody>
                <tr class="toolbar">
                    <td colspan="3">
                        <button data-bind="click: removeAll">Delete all</button>
                        <button data-bind="click: saveAll">Save all</button>
                        <button data-bind="click: refreshAll">Refresh all</button>
                    </td>
                </tr>
            </tbody>
        </table>
        
        
        
        <h3>Student Editor</h3>
        <div class="remarks">
        In this form, new objects can be created and then added to the list.
        </div>
        <!-- bind to add() of list model -->
        <form class="new_object_editor" data-bind="submit: add">
            Add student: <input data-bind="value: newStudentFirstName" placeholder="first name here" />
            <input data-bind="value: newStudentName" placeholder="last name here" />
            <button type="submit">Add</button>
        </form>

        <hr/>
        &copy; Jens Dietrich, 2013
        
        <script>
            ko.applyBindings(new StudentListViewModel());
        </script>
    </body>
</html>
